<template>
  <view class="zmt-table-editor">
    <!-- 工具栏 -->
    <view class="toolbar">
      <view class="toolbar-item" @click="createTable">
        <text class="btn-icon">⊞</text>
        <text>插入表格</text>
      </view>
      <view class="toolbar-item" @click="addRow">
        <text class="btn-icon">↓</text>
        <text>添加行</text>
      </view>
      <view class="toolbar-item" @click="addColumn">
        <text class="btn-icon">→</text>
        <text>添加列</text>
      </view>
      <view class="toolbar-item" @click="deleteRow">
        <text class="btn-icon">↑</text>
        <text>删除行</text>
      </view>
      <view class="toolbar-item" @click="deleteColumn">
        <text class="btn-icon">←</text>
        <text>删除列</text>
      </view>
     <!-- <view class="toolbar-item" @click="setCellStyle">
        <text class="btn-icon">🎨</text>
        <text>单元格样式</text>
      </view>
      <view class="toolbar-item" @click="exportData">
        <text class="btn-icon">📤</text>
        <text>导出数据</text>
      </view> -->
    </view>

    <!-- 表格编辑区域 -->
    <view class="editor-container">
      <!-- 空状态提示 -->
      <view v-if="!tableData.length && !initTableData" class="empty-tip">
        <text>点击"插入表格"按钮创建表格</text>
      </view>
      <!-- HTML回显与编辑容器 -->
      <view v-else ref="tableContainer" class="table-edit-container">
        <!-- 用于解析HTML的隐藏容器 -->
        <view ref="htmlParser" class="html-parser" v-html="initTableData" style="display: none;"></view>
        <!-- 实际编辑的表格 -->
        <table v-if="tableData.length" class="table-container" ref="tableRef">
          <thead>
            <tr>
              <th v-for="(cell, colIndex) in tableData[0]" :key="'header-' + colIndex" 
                  @click="selectCell(0, colIndex)"
                  :class="{ 'selected': selectedCell.row === 0 && selectedCell.col === colIndex }"
                  :style="{ width: colWidths[colIndex] + 'px', ...(colIndex === 0 ? {minWidth: '80px'} : {}) }">
                <div class="cell-content" @click.stop>
                  <input type="text" v-model="cell.content" @click.stop />
                </div>
                <div class="resize-handle" @mousedown.stop="startResize($event, 'col', colIndex)"></div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, rowIndex) in tableData.slice(1)" :key="'row-' + rowIndex">
              <td v-for="(cell, colIndex) in row" :key="'cell-' + rowIndex + '-' + colIndex"
                  @click="selectCell(rowIndex + 1, colIndex)"
                  :class="{ 'selected': selectedCell.row === rowIndex + 1 && selectedCell.col === colIndex }"
                  :style="{ 
                    backgroundColor: cell.bgColor, 
                    color: cell.textColor, 
                    fontSize: cell.fontSize + 'px',
                    width: colWidths[colIndex] + 'px',
                    ...(colIndex === 0 ? {minWidth: '80px'} : {})
                  }">
                <div class="cell-content" @click.stop>
                  <input type="text" v-model="cell.content" @click.stop />
                </div>
                <div class="resize-handle" @mousedown.stop="startResize($event, 'col', colIndex)"></div>
              </td>
            </tr>
          </tbody>
        </table>
      </view>
    </view>

    <!-- 插入表格弹窗 -->
    <view v-if="showCreateDialog" class="dialog-overlay">
      <view class="dialog">
        <view class="dialog-header">
          <text class="dialog-title">插入表格</text>
          <text class="dialog-close" @click="showCreateDialog = false">×</text>
        </view>
        <view class="dialog-content">
          <view class="form-item">
            <text class="form-label">行数：</text>
            <input type="number" v-model.number="tableConfig.rows" min="1" max="20" class="form-input" />
          </view>
          <view class="form-item">
            <text class="form-label">列数：</text>
            <input type="number" v-model.number="tableConfig.cols" min="1" max="10" class="form-input" />
          </view>
        </view>
        <view class="dialog-footer">
          <button class="btn-cancel" @click="showCreateDialog = false">取消</button>
          <button class="btn-confirm" @click="confirmCreateTable">确定</button>
        </view>
      </view>
    </view>

    <!-- 单元格样式设置弹窗 -->
    <view v-if="showStyleDialog" class="dialog-overlay">
      <view class="dialog">
        <view class="dialog-header">
          <text class="dialog-title">单元格样式</text>
          <text class="dialog-close" @click="showStyleDialog = false">×</text>
        </view>
        <view class="dialog-content">
          <view class="form-item">
            <text class="form-label">背景色：</text>
            <input type="color" v-model="cellStyle.bgColor" class="form-input color-input" />
          </view>
          <view class="form-item">
            <text class="form-label">文字颜色：</text>
            <input type="color" v-model="cellStyle.textColor" class="form-input color-input" />
          </view>
          <view class="form-item">
            <text class="form-label">字体大小：</text>
            <input type="number" v-model.number="cellStyle.fontSize" min="12" max="24" class="form-input" />
          </view>
        </view>
        <view class="dialog-footer">
          <button class="btn-cancel" @click="showStyleDialog = false">取消</button>
          <button class="btn-confirm" @click="applyCellStyle">应用</button>
        </view>
      </view>
    </view>

    <!-- 导出数据弹窗 -->
    <view v-if="showExportDialog" class="dialog-overlay">
      <view class="dialog">
        <view class="dialog-header">
          <text class="dialog-title">导出数据</text>
          <text class="dialog-close" @click="showExportDialog = false">×</text>
        </view>
        <view class="dialog-content">
          <view class="form-item">
            <text class="form-label">导出格式：</text>
            <radio-group v-model="exportFormat">
              <label><radio value="json" /> JSON</label>
              <label><radio value="csv" /> CSV</label>
              <label><radio value="html" /> HTML</label>
            </radio-group>
          </view>
          <view v-if="exportFormat === 'json'" class="export-preview">
            <text class="preview-title">JSON预览：</text>
            <textarea class="preview-textarea" :value="getExportData()" readonly></textarea>
          </view>
          <view v-if="exportFormat === 'csv'" class="export-preview">
            <text class="preview-title">CSV预览：</text>
            <textarea class="preview-textarea" :value="getExportData()" readonly></textarea>
          </view>
          <view v-if="exportFormat === 'html'" class="export-preview">
            <text class="preview-title">HTML预览：</text>
            <textarea class="preview-textarea" :value="getExportData()" readonly></textarea>
          </view>
        </view>
        <view class="dialog-footer">
          <button class="btn-cancel" @click="showExportDialog = false">取消</button>
          <button class="btn-confirm" @click="downloadData">下载</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'zmt-table-editor',
  props: {
    // 接收HTML字符串，用于表格回显
    initTableData: {
      type: String,
      default: ''
    },
    index: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      tableData: [], // 编辑用的表格数据（从HTML解析生成）
      selectedCell: { row: -1, col: -1 },
      tableConfig: {
        rows: 4,
        cols: 2
      },
      cellStyle: {
        bgColor: '#ffffff',
        textColor: '#000000',
        fontSize: 14
      },
      showCreateDialog: false,
      showStyleDialog: false,
      showExportDialog: false,
      exportFormat: 'json',
      resizing: false,
      resizeStartX: 0,
      resizeColIndex: -1,
      colWidths: [] // 列宽配置
    };
  },
  mounted() {
    // 确保DOM渲染完成后再解析HTML
    this.$nextTick(() => {
      if (this.initTableData) {
        this.initTableFromHtml();
      }
    });
  },
  watch: {
    // 监听初始HTML变化，重新解析
    initTableData: {
      immediate: false,
      handler(newVal) {
        // 使用nextTick确保DOM已更新
        this.$nextTick(() => {
          if (newVal) {
            this.initTableFromHtml();
          } else {
            this.tableData = [];
            this.colWidths = [];
          }
          this.syncHtmlContent();
        });
      }
    },
    // 表格数据变化时同步HTML到父组件
    tableData: {
      deep: true,
      handler() {
        this.syncHtmlContent();
      }
    },
    // 列宽变化时同步HTML
    colWidths: {
      deep: true,
      handler() {
        this.syncHtmlContent();
      }
    }
  },
  methods: {
    /**
     * 从初始HTML解析表格数据，生成tableData和colWidths
     */
    initTableFromHtml() {
      // 检查环境是否支持DOM操作
      if (typeof document === 'undefined') {
        console.warn('当前环境不支持DOM操作，无法解析HTML表格');
        return;
      }

      // 获取解析容器
      const parser = this.$refs.htmlParser;
      if (!parser || typeof parser.querySelector !== 'function') {
        // 如果refs获取失败，创建临时div用于解析
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = this.initTableData;
        this.parseTableFromElement(tempDiv);
        return;
      }

      // 正常解析流程
      this.parseTableFromElement(parser);
    },

    /**
     * 从DOM元素中解析表格数据
     */
    parseTableFromElement(element) {
      // 获取表格元素
      const table = element.querySelector('table') || element.querySelector('.zmt-generated-table');
      if (!table) {
        console.warn('未在HTML中找到表格元素');
        return;
      }

      const newTableData = [];
      const newColWidths = [];

      // 解析表头
      const thead = table.querySelector('thead');
      const headerRow = thead ? thead.querySelector('tr') : null;
      if (headerRow) {
        const headerCells = headerRow.querySelectorAll('th');
        const headerData = [];
        
        // 初始化列宽
        headerCells.forEach((th, index) => {
          const width = th.style.width ? parseInt(th.style.width) : 100;
          if (index === 0) newColWidths.push(Math.max(width, 80)); // 首列最小宽度80px
          else newColWidths.push(width);

          // 提取表头单元格数据
          headerData.push({
            content: th.textContent.trim(),
            bgColor: th.style.backgroundColor || '#ffffff', // 表头默认背景色
            textColor: th.style.color || '#000000',
            fontSize: th.style.fontSize ? parseInt(th.style.fontSize) : 14
          });
        });
        newTableData.push(headerData);
      }

      // 解析表体
      const tbody = table.querySelector('tbody');
      if (tbody) {
        const bodyRows = tbody.querySelectorAll('tr');
        bodyRows.forEach(tr => {
          const rowData = [];
          const cells = tr.querySelectorAll('td');
          
          cells.forEach((td, colIndex) => {
            rowData.push({
              content: td.textContent.trim(),
              bgColor: td.style.backgroundColor || '#ffffff',
              textColor: td.style.color || '#000000',
              fontSize: td.style.fontSize ? parseInt(td.style.fontSize) : 14
            });
          });
          
          newTableData.push(rowData);
        });
      }

      // 如果没有表头，尝试从tbody中获取第一行作为表头
      if (newTableData.length === 0 && tbody) {
        const firstRow = tbody.querySelector('tr');
        if (firstRow) {
          const headerCells = firstRow.querySelectorAll('td, th');
          const headerData = [];
          
          headerCells.forEach((cell, index) => {
            const width = cell.style.width ? parseInt(cell.style.width) : 100;
            newColWidths.push(Math.max(width, 80));
            
            headerData.push({
              content: cell.textContent.trim(),
              bgColor: '#ffffff',
              textColor: cell.style.color || '#000000',
              fontSize: cell.style.fontSize ? parseInt(cell.style.fontSize) : 14
            });
          });
          newTableData.push(headerData);
          
          // 处理剩余行
          const remainingRows = Array.from(tbody.querySelectorAll('tr')).slice(1);
          remainingRows.forEach(tr => {
            const rowData = [];
            const cells = tr.querySelectorAll('td');
            
            cells.forEach((td, colIndex) => {
              rowData.push({
                content: td.textContent.trim(),
                bgColor: td.style.backgroundColor || '#ffffff',
                textColor: td.style.color || '#000000',
                fontSize: td.style.fontSize ? parseInt(td.style.fontSize) : 14
              });
            });
            
            newTableData.push(rowData);
          });
        }
      }

      // 更新编辑数据
      this.tableData = newTableData;
      this.colWidths = newColWidths;
    },

    /**
     * 格式化单元格内容为"标签：值"格式
     */
    formatCellContent(content) {
      if (!content) return { label: '', value: '' };
      
      // 检查是否包含中文冒号或英文冒号
      const cnColonIndex = content.indexOf('：');
      const enColonIndex = content.indexOf(':');
      
      let colonIndex = -1;
      if (cnColonIndex !== -1 && enColonIndex !== -1) {
        // 如果两种冒号都存在，使用第一个
        colonIndex = Math.min(cnColonIndex, enColonIndex);
      } else if (cnColonIndex !== -1) {
        colonIndex = cnColonIndex;
      } else if (enColonIndex !== -1) {
        colonIndex = enColonIndex;
      }
      
      if (colonIndex !== -1) {
        return {
          label: content.substring(0, colonIndex + 1).trim(), // 包含冒号
          value: content.substring(colonIndex + 1).trim()
        };
      } else {
        // 如果没有冒号，整个内容作为值，标签为空
        return {
          label: '',
          value: content.trim()
        };
      }
    },

    /**
     * 同步HTML内容到父组件
     */
    syncHtmlContent() {
      let html = '';
      if (this.tableData.length) {
        // 构建完整HTML字符串
        html = '<table class="zmt-generated-table" border="1" style="border-collapse: collapse;">';
        
        // 构建表头
        html += '<thead><tr>';
        this.tableData[0].forEach((cell, colIndex) => {
          html += `<th style="width: ${this.colWidths[colIndex]}px; text-align:left; background-color: #fff; color: ${cell.textColor}; font-size: ${cell.fontSize}px; padding: 4px; min-width: 80px; height: 40px; font-weight: normal;">`;
          
          // 格式化单元格内容
          const { label, value } = this.formatCellContent(cell.content);
          if (label) {
            html += `<div style="display: flex; width: 100%;">`;
            html += `<div style="width: 45%; text-align: right; font-weight: bold; padding-right: 5%;color:#444;">${this.escapeHtml(label)}</div>`;
            html += `<div style="width: 45%; text-align: center;color:#444;">${this.escapeHtml(value)}</div>`;
            html += `</div>`;
          } else {
            html += this.escapeHtml(cell.content);
          }
          
          html += '</th>';
        });
        html += '</tr></thead>';
        
        // 构建表体
        html += '<tbody>';
        this.tableData.slice(1).forEach(row => {
          html += '<tr>';
          row.forEach((cell, colIndex) => {
            html += `<td style="width: ${this.colWidths[colIndex]}px; background-color: ${cell.bgColor}; color: ${cell.textColor}; font-size: ${cell.fontSize}px; padding: 4px; min-width: 80px; height: 40px;">`;
            
            // 格式化单元格内容
            const { label, value } = this.formatCellContent(cell.content);
            if (label) {
              html += `<div style="display: flex; width: 100%;">`;
              html += `<div style="width: 45%; text-align: right; font-weight: bold; padding-right: 5%;color:#444;">${this.escapeHtml(label)}</div>`;
              html += `<div style="width: 45%; text-align: center;color:#444;">${this.escapeHtml(value)}</div>`;
              html += `</div>`;
            } else {
              html += this.escapeHtml(cell.content);
            }
            
            html += '</td>';
          });
          html += '</tr>';
        });
        html += '</tbody></table>';
      }
      
      // 同步到父组件
      this.$emit('htmlContentChange', { index: this.index, html: html });
      // 同步原始编辑数据
      this.$emit('tableDataChange', JSON.parse(JSON.stringify(this.tableData)));
    },
    
    /**
     * HTML转义处理
     */
    escapeHtml(unsafe) {
      if (!unsafe) return '';
      return unsafe
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
    },

    /**
     * 打开创建表格弹窗
     */
    createTable() {
      this.showCreateDialog = true;
    },
    
    /**
     * 确认创建表格
     */
    confirmCreateTable() {
      const { rows, cols } = this.tableConfig;
      if (rows < 1 || cols < 1) {
        uni.showToast({
          title: '行数和列数必须大于0',
          icon: 'none'
        });
        return;
      }
      
      const newTableData = [];
      for (let i = 0; i < rows; i++) {
        const row = [];
        for (let j = 0; j < cols; j++) {
          row.push({
            content: '',
            bgColor: i === 0 ? '#f9f9f9' : '#ffffff', // 表头默认背景色
            textColor: '#000000',
            fontSize: 14
          });
        }
        newTableData.push(row);
      }
      this.tableData = newTableData;
      this.colWidths = Array(cols).fill(100);
      this.showCreateDialog = false;
    },
    
    /**
     * 选中单元格
     */
    selectCell(row, col) {
      this.selectedCell = { row, col };
      if (row >= 0 && col >= 0 && this.tableData[row] && this.tableData[row][col]) {
        this.cellStyle = { ...this.tableData[row][col] };
      }
    },
    
    /**
     * 添加行
     */
    addRow() {
      if (!this.tableData.length) {
        uni.showToast({
          title: '请先创建表格',
          icon: 'none'
        });
        return;
      }
      
      const cols = this.tableData[0].length;
      const newRow = [];
      for (let i = 0; i < cols; i++) {
        newRow.push({
          content: '',
          bgColor: '#ffffff',
          textColor: '#000000',
          fontSize: 14
        });
      }
      
      // 在选中行下方插入新行，默认插入到最后
      const insertIndex = this.selectedCell.row >= 0 ? this.selectedCell.row + 1 : this.tableData.length;
      this.tableData.splice(insertIndex, 0, newRow);
    },
    
    /**
     * 添加列
     */
    addColumn() {
      if (!this.tableData.length) {
        uni.showToast({
          title: '请先创建表格',
          icon: 'none'
        });
        return;
      }
      
      // 在选中列右侧插入新列，默认插入到最后
      const insertIndex = this.selectedCell.col >= 0 ? this.selectedCell.col + 1 : this.tableData[0].length;
      
      this.tableData.forEach(row => {
        row.splice(insertIndex, 0, {
          content: '',
          bgColor: row === this.tableData[0] ? '#ffffff' : '#ffffff',
          textColor: '#000000',
          fontSize: 14
        });
      });
      
      this.colWidths.splice(insertIndex, 0, 100);
    },
    
    /**
     * 删除行
     */
    deleteRow() {
      if (!this.tableData.length || this.tableData.length <= 1) {
        uni.showToast({
          title: '表格至少需要保留一行',
          icon: 'none'
        });
        return;
      }
      
      if (this.selectedCell.row >= 0) {
        this.tableData.splice(this.selectedCell.row, 1);
        this.selectedCell = { row: -1, col: -1 };
      } else {
        uni.showToast({
          title: '请先选中要删除的行',
          icon: 'none'
        });
      }
    },
    
    /**
     * 删除列
     */
    deleteColumn() {
      if (!this.tableData.length || this.tableData[0].length <= 1) {
        uni.showToast({
          title: '表格至少需要保留一列',
          icon: 'none'
        });
        return;
      }
      
      if (this.selectedCell.col >= 0) {
        this.tableData.forEach(row => {
          row.splice(this.selectedCell.col, 1);
        });
        this.colWidths.splice(this.selectedCell.col, 1);
        this.selectedCell = { row: -1, col: -1 };
      } else {
        uni.showToast({
          title: '请先选中要删除的列',
          icon: 'none'
        });
      }
    },
    
    /**
     * 打开单元格样式设置弹窗
     */
    setCellStyle() {
      if (this.selectedCell.row < 0 || this.selectedCell.col < 0) {
        uni.showToast({
          title: '请先选中单元格',
          icon: 'none'
        });
        return;
      }
      
      this.showStyleDialog = true;
    },
    
    /**
     * 应用单元格样式
     */
    applyCellStyle() {
      if (this.selectedCell.row >= 0 && this.selectedCell.col >= 0) {
        const { row, col } = this.selectedCell;
        this.tableData[row][col] = { ...this.cellStyle };
      }
      
      this.showStyleDialog = false;
    },
    
    /**
     * 打开导出数据弹窗
     */
    exportData() {
      if (!this.tableData.length) {
        uni.showToast({
          title: '没有可导出的数据',
          icon: 'none'
        });
        return;
      }
      
      this.showExportDialog = true;
    },
    
    /**
     * 获取导出数据
     */
    getExportData() {
      if (this.exportFormat === 'json') {
        const simpleData = this.tableData.map(row => 
          row.map(cell => cell.content)
        );
        return JSON.stringify(simpleData, null, 2);
      } else if (this.exportFormat === 'csv') {
        return this.tableData.map(row => 
          row.map(cell => `"${cell.content.replace(/"/g, '""')}"`).join(',')
        ).join('\n');
      } else {
        // 生成HTML格式
        let html = '<table border="1" style="border-collapse: collapse;">';
        html += '<thead><tr>';
        this.tableData[0].forEach(cell => {
          html += `<th style="padding: 4px; text-align:left; background-color: #fff; font-weight: normal;">${this.escapeHtml(cell.content)}</th>`;
        });
        html += '</tr></thead><tbody>';
        this.tableData.slice(1).forEach(row => {
          html += '<tr>';
          row.forEach(cell => {
            // 格式化单元格内容
            const { label, value } = this.formatCellContent(cell.content);
            if (label) {
              html += `<td style="padding: 4px;color:#999; background-color: ${cell.bgColor}; font-size: ${cell.fontSize}px;">`;
              html += `<div style="display: flex; width: 100%;">`;
              html += `<div style="width: 45%; text-align: right; font-weight: bold; padding-right: 5%;color:#444;">${this.escapeHtml(label)}</div>`;
              html += `<div style="width: 45%; text-align: center;color:#444;">${this.escapeHtml(value)}</div>`;
              html += `</div></td>`;
            } else {
              html += `<td style="padding: 4px; background-color: ${cell.bgColor}; color: ${cell.textColor}; font-size: ${cell.fontSize}px;">${this.escapeHtml(cell.content)}</td>`;
            }
          });
          html += '</tr>';
        });
        html += '</tbody></table>';
        return html;
      }
    },
    
    /**
     * 下载导出数据
     */
    downloadData() {
      const data = this.getExportData();
      const fileName = `table-data.${this.exportFormat}`;
      
      // 这里可以根据实际环境实现下载逻辑
      // 例如在H5中可以使用Blob对象创建下载链接
      if (typeof window !== 'undefined') {
        const blob = new Blob([data], { type: this.getMimeType() });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
      } else {
        // 非H5环境可以使用平台API
        uni.showToast({
          title: `数据已导出: ${fileName}`,
          icon: 'none'
        });
        console.log('导出数据:', data);
      }
      
      this.showExportDialog = false;
    },
    
    /**
     * 获取导出文件的MIME类型
     */
    getMimeType() {
      switch (this.exportFormat) {
        case 'json':
          return 'application/json';
        case 'csv':
          return 'text/csv';
        case 'html':
          return 'text/html';
        default:
          return 'text/plain';
      }
    },
    
    /**
     * 开始调整列宽
     */
    startResize(event, type, index) {
      if (type === 'col') {
        this.resizing = true;
        this.resizeStartX = event.clientX || event.touches[0].clientX;
        this.resizeColIndex = index;
        
        document.addEventListener('mousemove', this.resize);
        document.addEventListener('touchmove', this.resize);
        document.addEventListener('mouseup', this.stopResize);
        document.addEventListener('touchend', this.stopResize);
      }
    },
    
    /**
     * 调整列宽
     */
    resize(event) {
      if (!this.resizing) return;
      
      const currentX = event.clientX || event.touches[0].clientX;
      const deltaX = currentX - this.resizeStartX;
      
      if (this.resizeColIndex >= 0 && this.resizeColIndex < this.colWidths.length) {
        // 限制最小宽度
        const newWidth = Math.max(80, this.colWidths[this.resizeColIndex] + deltaX);
        this.colWidths[this.resizeColIndex] = newWidth;
        this.resizeStartX = currentX;
      }
    },
    
    /**
     * 停止调整列宽
     */
    stopResize() {
      this.resizing = false;
      this.resizeColIndex = -1;
      
      document.removeEventListener('mousemove', this.resize);
      document.removeEventListener('touchmove', this.resize);
      document.removeEventListener('mouseup', this.stopResize);
      document.removeEventListener('touchend', this.stopResize);
    }
  }
};
</script>

<style>
	.uni-input-input{
		text-align: left !important;
		font-weight:400 !important;
		background:#fff !important;
		font-size:14px !important;
	}
	tr{background:#fff !important;}
	.cell-content{background:#fff !important;}
</style>
<style scoped>

.zmt-table-editor {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}

.toolbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  margin-right: 10px;
  margin-bottom: 5px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.toolbar-item:hover {
  background-color: #e0e0e0;
}

.toolbar-item .btn-icon {
  font-size: 20px;
  color: #333;
  margin-bottom: 4px;
}

.toolbar-item text {
  font-size: 12px;
  color: #666;
}

.editor-container {
  flex: 1;
  padding: 20px;
  overflow: auto;
  background-color: #fff;
}

.empty-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #999;
  font-size: 14px;
  border-radius: 4px;
}

.table-container {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.table-container th,
.table-container td {
  position: relative;
  border: 1px solid #e0e0e0;
  min-width: 80px;
  height: 40px;
  padding: 0;
  overflow: hidden;
}

.table-container th {
  background-color: #f9f9f9;
  font-weight: normal; /* 确保表头不加粗 */
  text-align: left; /* 确保表头不居中 */
}

.table-container th.selected,
.table-container td.selected {
  border: 2px solid #007aff;
}

.cell-content {
  width: 100%;
  height: 100%;
  padding: 4px;
  box-sizing: border-box;
}

.cell-content input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: inherit;
  color: inherit;
}

.resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  background-color: transparent;
}

.resize-handle:hover {
  background-color: #007aff;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
}

.dialog {
  width: 80%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.dialog-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.dialog-close {
  font-size: 20px;
  color: #999;
  cursor: pointer;
}

.dialog-content {
  padding: 15px;
}

.form-item {
  margin-bottom: 15px;
}

.form-label {
  display: inline-block;
  width: 80px;
  font-size: 14px;
  color: #666;
}

.form-input {
  width: calc(100% - 90px);
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 14px;
}

.color-input {
  height: 36px;
  padding: 2px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 15px;
  border-top: 1px solid #e0e0e0;
}

.btn-cancel,
.btn-confirm {
  padding: 8px 20px;
  margin-left: 10px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.btn-cancel {
  background-color: #f5f5f5;
  color: #666;
}

.btn-confirm {
  background-color: #007aff;
  color: #fff;
}

.export-preview {
  margin-top: 15px;
}

.preview-title {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.preview-textarea {
  width: 100%;
  height: 150px;
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 12px;
  font-family: monospace;
  resize: none;
}

/* 生成的HTML表格样式 */
.zmt-generated-table {
  width: 100%;
  border-collapse: collapse;
}

/* 确保生成的HTML表格中th元素不加粗不居中 */
.zmt-generated-table th {
  font-weight: normal !important;
  text-align: left !important;
}

/* 确保生成的HTML表格中th元素不加粗不居中 */
.zmt-generated-table th {
  font-weight: normal !important;
  text-align: left !important;
}
</style>